<template>
    <view
        class="content"
        :style="{ backgroundImage: `url(${site_config.front_background})` }"
        v-if="site_config">
        <u-navbar
            title="秀宴"
            @rightClick="rightClick"
            :autoBack="true"
            placeholder
            :titleStyle="titleStyle">
        </u-navbar>
        <!-- <status-bar title=" " hideBg="1" statusHeight backColor :back="back"></status-bar> -->
        <view class="Box">
            <scroll-view scroll-y="true" class="scrollView" @scroll="Scroll">
                <movable-area
                    class="movable-area"
                    :style="{ height: 1296 + 'rpx' }"
                    :scale-area="true">
                    <movable-view
                        class="movable-view"
                        :out-of-bounds="false"
                        direction="all"
                        :scale="true"
                        :scale-min="1"
                        :scale-value="scaleValue"
                        :disabled="Disabled"
                        @scale="scaleView">
                        <view
                            class="list"
                            v-for="(item, index) in site_location"
                            :key="index"
                            :style="{
                                width: item.width + 'rpx',
                                height: item.height + 'rpx',
                                left: item.x + 'rpx',
                                top: item.y + 'rpx',
                            }"
                            @click="selectTab(item)">
                            <image
                                :src="$imgUrls(item.choose_log)"
                                class="list_img"
                                v-if="item.select == 1"></image>
                            <block v-else>
                                <image
                                    :src="$imgUrls(item.empty_log)"
                                    class="list_img"
                                    v-if="item.order_state == 0 || item.order_state == 2"></image>
                                <image
                                    :src="$imgUrls(item.order_log)"
                                    class="list_img"
                                    v-if="item.order_state == 1">
                                </image>
                            </block>
                        </view>

                        <image
                            :src="$imgUrls(site_bao_fang.img)"
                            mode="widthFix"
                            class="rows"></image>
                    </movable-view>
                </movable-area>
            </scroll-view>
            <!-- 	<view class="box_Tip">
				<view class="box_Tip_list">
					<view class="type_config" v-for="(item, index) in type_config" :key="item.id">
						<image
							:src="$imgUrls(item.empty_log)"
							class="type_config_log m-right4"></image>
						<text class="type_config_name m-">{{ item.type_name }}</text>
					</view>
				</view>
			</view> -->
        </view>

        <view class="footer">
            <view class="d-flex a-center padding20" @click="$common.Tel(site_bao_fang.tel)">
                <text class="black size32">{{ site_bao_fang.text }}</text>
                <text class="color_d85 size32 bold">{{ site_bao_fang.tel }}</text>
            </view>
        </view>

        <u-modal
            :show="show"
            title="温馨提示"
            :content="site_config.tel_desc"
            :closeOnClickOverlay="true"
            confirmText="立即联系"
            confirmColor="#e0bb71"
            @close="show = false"
            @confirm="Confirm"></u-modal>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scaleValue: 1,
                details: '',
                id: '',
                type_config: [],
                site_config: '',
                site_location: [],
                selectArr: [],
                Disabled: true,
                priceObj: '',
                show: false,
                site_bao_fang: '',
                titleStyle: {
                    fontWeight: 'bold',
                },
            };
        },
        onLoad(opt) {
            if (opt.id) this.id = opt.id;
            this.getSiteTimeDetail();
        },

        methods: {
            getSiteTimeDetail() {
                this.$showLoading('');
                this.$http
                    .get({
                        url: '/SiteApiV2/getSiteTimeDetail',
                        data: {
                            id: this.id,
                        },
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        const Result = res.data;
                        this.details = Result;
                        this.site_bao_fang = Result.site_bao_fang;
                        this.site_config = Result.site_config;
                        // Result.site_location.forEach((item) => {
                        // 	item.width = Math.round(Number(Result.site_config.width));
                        // 	item.height = Math.round(Number(Result.site_config.height));
                        // 	item.x = Math.round(Number(item.x));
                        // 	item.y = Math.round(Number(item.y));
                        // 	let userItem = Result.type_config.find((n) => n.id == item.site_type);
                        // 	if (userItem) {
                        // 		item.empty_log = userItem.empty_log;
                        // 		item.choose_log = userItem.choose_log;
                        // 		item.order_log = userItem.order_log;
                        // 		item.type_name = userItem.type_name;
                        // 	}
                        // });
                        this.site_location = Result.site_location;
                        this.type_config = Result.type_config || [];
                    });
            },
            selectTab(item) {
                if (this.scaleValue == 1) this.scaleValue = 1.5;
                if (item.order_state == 1) return this.$Toast('该座位已被预约，请重新选择');
                if (item.order_state == 2) return;
                if (item.tel == 1) return (this.show = true);
                const Flag = this.containsObjectWithData(this.selectArr, 'id', item.id);
                const Index = this.site_location.findIndex((n) => n.id == item.id);
                if (Flag) {
                    const selectIndex = this.selectArr.findIndex((n) => n.id == item.id);
                    this.selectArr.splice(selectIndex, 1);
                    this.site_location[Index].select = 0;
                } else {
                    this.selectArr.push(item);
                    this.site_location[Index].select = 1;
                }
                if (this.selectArr.length) this.getSitePriceInfo();
            },

            getSitePriceInfo() {
                let site_ids = [];
                this.selectArr.forEach((item) => {
                    site_ids.push(item.id);
                });
                this.$http
                    .get({
                        url: '/SiteApiV2/getSitePriceInfo',
                        data: {
                            site_id: site_ids.join(','),
                            time_id: this.id,
                        },
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const Result = res.data;
                        this.priceObj = Result;
                    });
            },

            chooseSite() {
                if (!this.selectArr.length) return;
                this.$showLoading('座位锁定中~');
                let site_ids = [];
                this.selectArr.forEach((item) => {
                    site_ids.push(item.id);
                });
                this.$http
                    .post({
                        url: '/SiteApiV2/chooseSite',
                        data: {
                            site_id: site_ids.join(','),
                            time_id: this.id,
                        },
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        if (res.data) this.toUrl(`orderDetails?order_id=${res.data}`);
                    });
            },

            scaleView(e) {
                const scale = e.detail.scale;
                scale > 1 ? (this.Disabled = false) : (this.Disabled = true);
            },
            Scroll(e) {
                // console.log(e,'1');
            },

            containsObjectWithData(objects, key, value) {
                return objects.some((obj) => obj[key] === value);
            },

            Confirm() {
                this.$common.Tel(this.site_config.tel);
            },
        },

        computed: {
            bgImgHeight() {
                if (!this.site_config) return;
                return Math.round(Number(this.site_config.img_h));
                // return Math.round(Number(this.site_config.img_h) * 0.81);
                // return Math.round(Number(this.site_config.img_h));
            },
        },
        watch: {
            scaleValue(newVal, oldVal) {
                if (newVal && newVal > 1) {
                    this.Disabled = false;
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .content {
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        background-size: cover;
        background-position: center;
        padding: 50rpx 0 200rpx 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        // background-color: #4a3721;
    }

    .Box {
        width: 750rpx;
        // width: 611rpx;
        height: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        background-size: 100% 100%;
        background-position: center;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
    }

    .box_Ten {
        width: 540rpx;
        // flex:1;
        margin: 80rpx auto 0;
        overflow: scroll;
        position: relative;
        text-align: center;
    }

    .scrollView {
        width: 750rpx;
        // width: 612rpx;
        // height: 80%;
        // margin: 60rpx auto 0;
        z-index: 9999;
    }

    .Tanine {
        width: 100%;
    }

    .Tanine_in {
        width: 100%;
        height: 1000rpx;
    }

    .movable-area {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 8988;
    }

    .movable-view {
        width: 100%;
        height: 100%;
    }

    .list {
        position: absolute;
        z-index: 10;
    }

    .list_img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .boxBgimg {
        width: 750rpx;
        height: 1349rpx;
    }

    // .boxBgimg{
    // 	width:750rpx;
    // 	height:1349rpx;
    // }

    .box_Tip {
        // width: 100%;
        // width: 450rpx;
        // height: 20%;

        // position: absolute;
        // bottom: 40rpx;
        // left: 30rpx;

        // z-index: 10000;
        width: 100%;
        // height: 20%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

    .box_Tip_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 10rpx;
    }

    .type_config {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        margin: 10rpx 20rpx;
    }

    .type_config_log {
        width: 28rpx;
        height: 28rpx;
        display: inline-block;
    }

    .type_config_name {
        font-size: 22rpx;
        margin-left: 4rpx;
        display: inline-block;
    }

    .footer {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1000;
        padding: 60rpx 30rpx;
        background-color: #fff;
        border-radius: 30rpx 30rpx 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
    }

    .details_txt {
        font-size: 22rpx;
    }

    .open_time {
        margin: 0 8rpx;
    }

    .Make_btn {
        width: 100%;
        height: 70rpx;
        background-color: #b99866;
        color: #fff;
        font-size: 26rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30rpx;
        border-radius: 10rpx;
    }

    .tableList {
        background-color: #b99866;
        padding: 4rpx 8rpx;
        border-radius: 6rpx;
        margin-right: 10rpx;
        display: inline-block;
    }

    .tableList_name {
        color: #fff;
        font-size: 24rpx;
    }

    .Givemoney {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 30rpx;
    }

    .MoneyBox {
        display: flex;
        flex-direction: column;
    }

    .Earnest {
        color: #a70c09;
        font-size: 22rpx;
        margin-right: 4rpx;
    }

    .EarnestMoney {
        color: #a70c09;
        font-size: 34rpx;
        font-weight: bold;
    }

    .Copewith {
        color: #000;
        font-size: 22rpx;
        margin-right: 4rpx;
    }

    .CopewithMoney {
        color: #000;
        font-size: 28rpx;
        padding-left: 4rpx;
    }

    .continum {
        width: 260rpx;
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: #fff;
        border-radius: 35rpx;
        background-color: #b99866;
        border: 4rpx solid #fef2dd;
    }
</style>
